<template>
  <el-col
    class="erp-form-col"
    :class="{feed: feed}"
    :xs="xsColCom"
    :sm="smColCom"
    :md="mdColCom"
    :lg="lgColCom"
    :xl="xlColCom"
    :tag="tag"
  >
    <slot />
  </el-col>
</template>

<script>
const maxCol = 24;
const blockCol = {span: maxCol};
/**
 * 基于element-ui的[el-col](https://element.eleme.cn/#/zh-CN/component/layout#col-attributes)
 * @author maolin
 */
export default {
  name: "ErpCol",
  props: {
    /**
     * 响应式布局，设置屏幕<768px时的列数，共24列
     * @public
     */
    xsCol: {
      type: Object,
      default (){
        return {span: 24};
      }
    },
    /**
     * 响应式布局，设置屏幕≥768px时的列数，共24列
     * @public
     */
    smCol: {
      type: Object,
      default (){
        return {span: 12};
      }
    },
    /**
     * 自定义元素标签
     * @public
     */
    tag: {
      type: String,
      default: 'div'
    },
    /**
     * 响应式布局，设置屏幕≥992px时的列数，共24列
     * @public
     */
    mdCol: {
      type: Object,
      default (){
        return {span: 8};
      }
    },
    /**
     * 响应式布局，设置屏幕≥1200px时的列数，共24列
     * @public
     */
    lgCol: {
      type: Object,
      default (){
        return {span: 6};
      }
    },
    /**
     * 响应式布局，设置屏幕≥1920px时的列数，共24列
     * @public
     */
    xlCol: {
      type: Object,
      default (){
        return {span: 4};
      }
    },
    /**
     * 栅格占据的列数【已废弃】
     * @public
     */
    spanCol: {
      type: Number,
      default: null
    },
    /**
     * 列的倍数
     * @public
     */
    block: {
      type: Number,
      default: 1
    },
    /**
     * @private
     */
    feed: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    xsColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.xsCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    smColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.smCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    mdColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.mdCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    lgColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.lgCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
    xlColCom () {
      if(this.block === undefined || this.block === null || this.block === 0) {
        return blockCol;
      }
      let calcSpan = this.xlCol.span * this.block;
      return {span: calcSpan > maxCol ? maxCol : calcSpan };
    },
  }
};
</script>

<style lang="scss" scoped>
</style>
